<template>
	<div id="AddChances">
		<el-breadcrumb separator-class="el-icon-arrow-right" class="a">
			<el-breadcrumb-item :to="{ path: '/marketing/chancesPlan' }">客户开发计划</el-breadcrumb-item>
			<el-breadcrumb-item>执行计划</el-breadcrumb-item>
		</el-breadcrumb>
		<el-form :inline="true" :model="formInline" class="demo-form-inline" style="float: right;">
			<el-form-item>
				<el-button size="medium" type="danger" @click.prevent="onSuf">制定计划</el-button>
				<el-button size="medium" type="primary">{{formInline.name}}</el-button>
				<el-button size="medium" type="danger" @click.prevent="stops" :disabled="stop">终止开发</el-button>
				<el-button size="medium" type="primary" @click.prevent="fanhui">返回</el-button>
			</el-form-item>
		</el-form>

		<el-form ref="form" :model="forms" label-width="80px">
			<table width="1200px">
				<tr>
					<td>
						<el-form-item label="编号">
							<el-input v-model="forms.id" :disabled="true"></el-input>
						</el-form-item>
					</td>
					<td>
						<el-form-item label="机会来源">
							<el-input v-model="forms.chancesFrom" :disabled="true"></el-input>
						</el-form-item>
					</td>
					<td>
						<el-form-item label="客户名称">
							<el-input v-model="forms.name" :disabled="true"></el-input>
						</el-form-item>
					</td>
					<td>
						<el-form-item label="成功机率">
							<el-input v-model="forms.successRate" :disabled="true"></el-input>
						</el-form-item>
					</td>
				</tr>
				<tr>
					<td>
						<el-form-item label="概要">
							<el-input v-model="forms.content" :disabled="true"></el-input>
						</el-form-item>
					</td>
					<td>
						<el-form-item label="联系人">
							<el-input v-model="forms.managerName" :disabled="true"></el-input>
						</el-form-item>
					</td>
					<td>
						<el-form-item label="联系电话">
							<el-input v-model="forms.phone" :disabled="true"></el-input>
						</el-form-item>
					</td>
					<td>
						<el-form-item label="创建人">
							<el-input v-model="forms.createUserId" :disabled="true"></el-input>
						</el-form-item>
					</td>
				</tr>
				<tr>
					<td>
						<el-form-item label="创建时间">
							<el-date-picker v-model="forms.createTime" type="datetime" :disabled="true"
								placeholder="选择日期时间">
							</el-date-picker>
						</el-form-item>
					</td>
					<td>
						<el-form-item label="指派给">
							<el-input v-model="forms.username" :disabled="true"></el-input>
						</el-form-item>
					</td>
					<td>
						<el-form-item label="指派时间">
							<el-date-picker v-model="forms.chancesTime" :disabled="true" type="datetime"
								placeholder="选择日期时间">
							</el-date-picker>
						</el-form-item>
					</td>
					<td>
						<el-form-item label="机会描述">
							<el-input type="textarea" v-model="forms.chancesDesc" :disabled="true" rows="3"
								style="width: 200px;"></el-input>
						</el-form-item>
					</td>
				</tr>
			</table>
		</el-form>
		<el-button type="primary" @click.prevent="onSubmit" class="btn" :disabled="btn">同意</el-button>
		<el-table :data="tableData" class="tb-edit" style="width: 100%" :highlight-current-row="rows">
			<el-table-column label="日期" width="180" prop="planTime">
				<template scope="scope">
					<el-input size="small" v-model="scope.row.planTime" :disabled="true"></el-input>
					<span>{{scope.row.planTime}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="planName" label="计划项">
				<template scope="scope">
					<el-input size="small" v-model="scope.row.planName" placeholder="请输入内容" :disabled="true"></el-input>
					<span>{{scope.row.planName}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="effect" label="计划效果">
				<template scope="scope">
					<el-input size="small" v-model="scope.row.effect" placeholder="请输入内容"></el-input>
					<span>{{scope.row.effect}}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template scope="scope">
					<el-button size="small" @click="handleEdit(scope.$index, scope.row)" :disabled="edit">保存</el-button>
				</template>
			</el-table-column>
		</el-table>
		<br />
	</div>

</template>

<script>
	export default {
		name: 'chancesApp',
		data() {
			return {
				stop: true,
				btn: false,
				edit: false,
				rows: true,
				forms: {
					id: '',
					chancesFrom: '',
					name: '',
					successRate: '',
					content: '',
					managerName: '',
					phone: '',
					state: '',
					createTime: '',
					username: '',
					chancesTime: '',
					chancesDesc: '',
					createUserId: ''
				},
				form: {
					planTime: '',
					planName: '',
					effect: ''
				},
				formInline: {
					name: '正在执行'

				},
				tableData: [],
			}
		},
		created() {
			this.initValue();
			this.initable();
		},
		methods: {
			stops() {
				this.$http.post('/oder/update?state=' + "2" + '&id=' + this.$route.query.id).then(res => {
					this.formInline.name = '开发失败'
					this.stop = true
				})
			},
			onSubmit() {
				this.$http.post('/oder/update?state=' + "1" + '&id=' + this.$route.query.id).then(res => {
					this.formInline.name = '开发成功'
					this.$http.post('/marketing/edit', {
						'id': this.$route.query.id,
						'isSuccess': 1
					}).then(res => {
						this.$http.post('/ship/selcet?id=' + this.$route.query.id).then(res => {
							if (res.data.customerId === this.$route.query.id) {
								this.btn = true;
								this.edit = true
								this.rows = false
							} else {
								this.$http.post('/customer/insert', this.forms
								).then(res => {
									this.btn = true;
									this.edit = true;
									this.rows = false;
									if (res.data.code === 0) {
										this.$message({
											message: res.data.msg,
											type: 'success'
										});
									}else{
										this.$message({
											message: res.data.msg,
											type: 'error'
										});
									}
								})
							}
						})

					})
				})
			},
			onSuf() {
				this.$router.push({ path: '/marketing/chancesPlan/ChancesApp', query: { id: this.$route.query.id } })
			},
			initValue() {
				this.$http.post('/marketing/find?id=' + this.$route.query.id).then(res => {
					console.log(res);
					this.forms = res.data
				})
			},
			initable() {
				this.$http.get('/plan/list?id=' + this.$route.query.id).then(res => {
					this.tableData = res.data
				})
			},
			handleEdit(index, row) {
				this.$http.post('/plan/edit?effect=' + row.effect + '&id=' + this.$route.query.id + '&plan=' + row.planName).then(res => {
					this.$message({
						message: '恭喜你，保存成功',
						type: 'success'
					});
					this.initable();
				})
			},
			fanhui() {
				this.$router.push('/marketing/chancesPlan');
			}
		}
	}
</script>

<style scoped="scoped">
	.btn {
		float: right;
	}

	* {
		margin: 0;
		padding: 0
	}

	body {
		font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
		overflow: auto;
		font-weight: 400;
		-webkit-font-smoothing: antialiased;
	}

	.tb-edit .el-input {
		display: none
	}

	.tb-edit .current-row .el-input {
		display: block
	}

	.tb-edit .current-row .el-input+span {
		display: none
	}

	.el-button {
		border: none;
	}
</style>